<template>
  <div class="home">
    <h1>store中的count值为：{{$store.state.count}}</h1>
    <h1>store中count的平方(采用getters)为:{{$store.getters.powercount}}</h1>
    <h3>读取getters中的powercount并加100：{{$store.getters.powercountadd100}}</h3>
    <h4>store中的count{{$store.getters.ismorethan(mycount)}}</h4>
    <button @click="addcount">count++</button>
    <button @click="addcountbyac">count++ by actions</button>
    <button @click="addcountbys(5)">add count by 参数</button>
    <button @click="decount">count--</button>
    <img alt="Vue logo" src="../assets/logo.png">
    <router-link to="/home/news">新闻</router-link> | 
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data() {
    return {
      mycount:10
    }
  },
  methods: {
    //调用store中mutations中的方法$store.commit
    addcount(){
      this.$store.commit('increment')
    },
    decount(){
      this.$store.commit('decrement')
    },

    //传递参数counts,参数可以为数字，字符串，数组，对象
    //所以如果有多个参数，可以通过对象或者数组传过去
    addcountbys(counts){

      //第一种提交风格
      this.$store.commit('addcountbys',counts)

      //第二种提交风格,接收到的参数是一个对象，{type:'addcountbys',counts:10}
      // this.$store.commit({
      //   type:'addcountbys',
      //   counts
      // })
    },

  //调用store中的actions中的方法，$store.dispatch，模拟异步操作
  //也可以传递参数过去，比如一个对象，success为回调函数，一旦在actions中commit（）后，变调用success方法
  //表示commit（）成功执行，通知前台
    // addcountbyac(){
    //   this.$store.dispatch('aincrement',{
    //     message:'我开始增加了',
    //     success:()=>{
    //       console.log('我增加成功了')
    //     }
    //   })
    // }

    //Promise风格，dispatch返回的是一个Promise，所以可以then，res为resolve传过来的值
      addcountbyac(){
      this.$store.dispatch('aincrement','我要开始增加了').then(res=>{
        console.log(res)
      })
    }
  },

  //只有在使用了keep-alive包裹router-view才能使用这两个函数
  activated() {
    
  },
  deactivated() {
    
  },
}
</script>
